<template>
  <a-drawer :open="visibleData" title="拜访详情" @close="onClose">
    <template #closeIcon>
      <div class="express-bar"></div>
      <div class="express-btn">
        <CloseCircleOutlined :size="32" @click="onClose" />
      </div>
    </template>
    <a-card size="small" :title="detailList?.store?.store_name">
      <a-descriptions size="small" :column="3">
        <a-descriptions-item label="联系人">{{ detailList?.store?.contacts }}</a-descriptions-item>
        <a-descriptions-item label="拜访时长">{{ detailList.visit_duration }}</a-descriptions-item>
        <a-descriptions-item label="所属路线">{{ detailList?.visitline?.name }}</a-descriptions-item>
        <!-- <a-descriptions-item label="经销商">{{ detailList?.dealer?.name }}</a-descriptions-item> -->
        <a-descriptions-item label="门店地址">{{ detailList?.store?.address }}</a-descriptions-item>
        <a-descriptions-item label="业务员">{{ detailList?.salesman?.rename }}</a-descriptions-item>
        <a-descriptions-item label="所属片区">{{ detailList?.store?.region?.name }}</a-descriptions-item>
        <a-descriptions-item label="当前陈列">{{ detailList?.store?.agreement.length || 0 }}</a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-card size="small" title="签到信息" style="margin-top: 10px" v-if="detailList.detail">
      <a-row>
        <a-col :span="20">
          <a-descriptions size="small" :column="1">
            <a-descriptions-item label="签到时间">{{ detailList.detail[0]?.sign_in_time }}</a-descriptions-item>
            <a-descriptions-item label="签到地址">{{ detailList.detail[0]?.sign_in_address }}</a-descriptions-item>
            <a-descriptions-item label="位置偏移">{{ detailList.detail[0]?.distance }}</a-descriptions-item>
          </a-descriptions>
        </a-col>
        <a-col :span="4">
          <a-image-preview-group>
            <div v-for="item in detailList?.detail[0]?.sign_in_pic.split(',')" style="display: inline-block; margin-right: 5px">
              <a-image :width="detailList?.detail[0]?.sign_in_pic ? 30 : 50" :src="item || failImg" />
            </div>
          </a-image-preview-group>
        </a-col>
      </a-row>
    </a-card>
    <a-card size="small" title="签出信息" style="margin-top: 10px" v-if="detailList?.detail">
      <a-row>
        <a-col :span="20">
          <a-descriptions size="small" :column="1">
            <a-descriptions-item label="签出时间">{{ detailList?.detail[1]?.sign_in_time }}</a-descriptions-item>
            <a-descriptions-item label="签到地址">{{ detailList?.detail[1]?.sign_in_address }}</a-descriptions-item>
            <a-descriptions-item label="位置偏移">{{ detailList?.detail[1]?.distance }}</a-descriptions-item>
          </a-descriptions>
        </a-col>
        <a-col :span="4">
          <a-image-preview-group>
            <div v-for="item in detailList?.detail[1]?.sign_in_pic.split(',')" style="display: inline-block; margin-right: 5px">
              <a-image :width="detailList?.detail[1]?.sign_in_pic ? 30 : 50" :src="item || failImg" />
            </div>
          </a-image-preview-group>
        </a-col>
      </a-row>
    </a-card>
    <a-card size="small" title="陈列检核" style="margin-top: 10px">
      <div v-for="val in detailList?.store?.agreement" style="margin-top: 10px">
        <a-row>
          <a-col :span="6">
            <a-descriptions size="small" :column="1">
              <a-descriptions-item label="陈列对象">{{ val.agreement_name }}</a-descriptions-item>
              <!-- <a-descriptions-item label="陈列类型">{{ val.store_short_name }}</a-descriptions-item> -->
              <a-descriptions-item label="陈列要求">{{ val.content }}</a-descriptions-item>
              <a-descriptions-item label="检核进度">{{ val.month_check_record ? '本月已核检' : '本月未核检' }}，{{ val?.checkRecord.length || 0 }}/{{ val.cycle_num || 0 }}</a-descriptions-item>
            </a-descriptions>
          </a-col>
          <a-col :span="18">
            <a-descriptions size="small" :column="6">
              <a-descriptions-item v-for="(record, index) in val?.checkRecord" :key="index">
                <div class="image-container">
                  <a-image :preview="{ visible: false }" :width="100" :src="record.check_pic.split(',')[0] || failImg" @click="record.visible = true" />
                  <div class="overlay">
                    <div class="text">检核人： {{ record?.salesman?.rename }} </div>
                    <div class="text">时间： {{ record?.check_date }} </div>
                  </div>
                </div>
                <div style="display: none">
                  <a-image-preview-group v-if="record.visible" :preview="{ visible: record.visible, onVisibleChange: (vis) => (record.visible = vis) }">
                    <a-image v-for="(item, imgIndex) in record.check_pic.split(',')" :key="imgIndex" :src="item || failImg" />
                  </a-image-preview-group>
                </div>
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
        </a-row>
        <div style="width: 80%; height: 0px; border: 1px solid rgba(0, 0, 0, 0.05)"></div>
      </div>
    </a-card>
    <template #footer>
      <a-button @click="onClose">取消</a-button>
    </template>
  </a-drawer>
</template>

<script setup lang="ts">
import { message } from 'ant-design-vue'
import { errorSentry } from '@/lib/error-sentry'
import failImg from '@/assets/images/notice/failImg.png'
import { visitApi } from '@/api/business/marketing/visit-api'

defineExpose({
  showDrawer
})
const emit = defineEmits(['refresh'])

// --------------------- Drawer 显示与隐藏 ---------------------
// 是否展示
const visibleData = ref(false)
const visible = ref(false)
// 详情
const options = ref({})
const detailList = ref({})

function showDrawer(item) {
  options.value = item
  detailData(item)
  visibleData.value = true
}

const detailData = async (val) => {
  detailList.value = {}
  try {
    const res = await visitApi.addVisit({ id: val.id })
    detailList.value = res.data
    if (detailList.value.store?.agreement) {
      detailList.value.store.agreement.forEach((agreement) => {
        if (agreement.checkRecord) {
          agreement.checkRecord.forEach((record) => {
            record.visible = false
          })
        }
      })
    }
  } catch (e) {
    if (e.status == 500) {
      message.error(e.response.data.message)
    } else {
      message.error(e.msg)
    }

    errorSentry.captureError(e)
  }
}

const onClose = () => {
  visibleData.value = false
}
</script>
<style lang="less" scoped>
.image-container {
  position: relative;
  display: inline-block;
  margin-right: 5px;
}

.image-container .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
  color: white;
  padding: 2px;
  font-size: 12px;
  text-align: left;
}

.image-container .text {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
